<template>
    <div class="index">
        <checkbox></checkbox>
        <navmenu></navmenu>
        <div class="index-color">
            <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="item in imagebox" :key="item">
                    <img :src="item" style="width: 100%"/>
                </el-carousel-item>
            </el-carousel>

            <div class="division"><h3>热门企业</h3>
<!--                <h3 style="color: #888;font-weight: 400">-&#45;&#45; Hot -&#45;&#45;</h3>-->
            </div>
                <div class="wrapper-card">
                    <div class="card" v-for="item in jobList" :key="item">
                        <img :src="item" class="image">
                    </div>
                </div>
        </div>

    </div>

</template>

<script>
    import navmenu from '@/components/navmenu'
    import checkbox from "../components/checkbox";

    export default {
        name: 'index',
        components: {
            checkbox,
            navmenu,
        },
        data() {
            return {
                jobList: [
                    require("../assets/img/alibaba.jpg"),
                    require("../assets/img/baidu.jpg"),
                    require("../assets/img/jingdong.jpg"),
                    require("../assets/img/tencent.jpg"),
                    require("../assets/img/wangyi.jpg"),
                    require("../assets/img/xinlang.jpg")
                ],
                imagebox: [
                    // require("@/assets/img/12_092528292833.jpg"),
                    // require("../assets/img/410_155641636324.jpg"),
                    require("../assets/img/1.png"),
                    require("../assets/img/2.png"),
                    require("../assets/img/3.png"),
                    require("../assets/img/4.png")

                ],

            }
        },
        methods: {}
    }
</script>
<style scoped>

    /*走马灯*/
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .index-color {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #F3F5F8;
        width: 100%;
    }

    .division {
        width: 100%;
        text-align: center;
        color: #5a5a5a;
    }

    .wrapper-card {
        width: 1200px;
        height: 1000px;
        color: #07111B;
        font-size: 16px;
        float: left;
        border-radius: 6px;
        padding-left: 10%;
    }

    .wrapper-card {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        border-radius: 6px;
    }

    .card {
        color: #07111B;
        font-size: 16px;
        width: 336px;
        height: 243px;
        float: left;
        margin: 30px;
        border-radius: 6px;
    }
    .image {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        border-radius: 6px;
        box-shadow: 5px 5px 10px #888;

    }

</style>
